<style lang="sass" scoped>
	#modelDetail{
		width: 100%;
		height: 100%;
		display: -webkit-box;
		position: relative;
		-webkit-box-orient: vertical;
		
		.modelArgument{
			
			width: 100%;
			height: 100%;
			-webkit-box-flex: 1;			
			background: #fff;
			overflow: auto;
			padding-bottom: 0rem;
			.paCon{
				padding: 0 1.5rem 5rem;
				.modelNav{
					padding: 1rem;
					height: 7rem;
					background: #fff;
					margin-bottom: 1rem;
					display: -webkit-box;
					border-bottom: 1px solid #ccc;
				.icon{
					width: 5rem;
					height: 5rem;
					img{
						min-height: 100%;
						min-width: 100%;
						max-width: 5rem;
						max-height: 5rem;
					}
				}
				.modelInfo{
					-webkit-box-flex: 1;
					height: 6rem;
					position: relative;
					margin-left: 1rem;
					p{
						width: 100%;
						height: 3rem;
						font-size: 1.3rem;
						line-height: 3rem;
						display: block;
						&:first-child{
							width: 70%;
						}
					}
					span{
						width: 5rem;
						height: 2rem;
						text-align: right;
						line-height: 2rem;
						background: #29b6f6;
						position: absolute;
						right: 0rem;
						top: 0.3rem;
						font-size: 1.3rem;
						padding-right: 0.5rem;
						border-radius: 0.5rem;
						color: #fff;
						i{
							font-size: 1.2rem;
						}
					}
				}
			}
			.banner{
				width: 100%;
				min-height: 10rem;
				height: auto;
			}
			.modelArgument_info{
				width: 100%;
				position: relative;
				border: 1px solid #E8E8E8;
				border-bottom: none;
				li{
					width: 100%;
					display: -webkit-box;
					div:first-child{
						width: 10rem;
						height: 3rem;
						line-height: 3rem;
						background: #f0f0f2;
						color: #999;
						font-size: 1.3rem;
						text-align: center;
						border-right: 1px solid #E8E8E8;
						border-bottom: 1px solid #E8E8E8;
					}
					div:last-child{
						-webkit-box-flex: 1;
						height: 3rem;
						font-size: 1.3rem;
						line-height: 3rem;
						padding-left: 2rem;
						border-bottom: 1px solid #E8E8E8;
					}
					
				}
			}
			.modelArgument_item,.modelArgumentCenter{
				width: 100%;
				height: 3rem;
				text-align: center;
				color: #666;
				line-height: 3rem;
				background: #f0f0f2;
				.other{
					color: #29b6f6;
					text-decoration:underline;
				}
			}
			.modelArgumentCenter{
				background: #fff;
			}
			.price{
				width: 100%;
				height: auto;
				padding: 1rem;
				display: -webkit-box;
				border: 1px solid #E8E8E8;
				-webkit-box-orient: vertical;
				li{
					-webkit-box-flex: 1;
					height: 3rem;
					line-height: 3rem;
					font-size: 1.3rem;
					border-bottom: 1px dashed  #E8E8E8;
				}
			}
		}
			}
		.feedback{
			width: 100%;
			padding: 1.5rem;
			position: relative;
			display: -webkit-box;
			background: #f0f0f2;
			li{
				-webkit-box-flex: 1;
				height: 4rem;
				line-height: 4rem;
				border-radius: 0.5rem;
				text-align: center;
				color: #fff;
				font-size:1.3rem; 
				&:first-child{
					background: #ff7043;
					margin-right: 1rem;
					text-align: center;
					 	
				}
				&:last-child{
					background: #29b6f6;
				}
			}
		}
		.other{
			color: #29b6f6;
			text-decoration:underline;
		}
	}
	
	
</style>
<template>
	
	<div id="modelDetail">
		
		<div class="modelArgument" v-if="result">
			<div class="paCon">
				<div class="modelNav">
				<div class="icon">
					<img src="../../libs/images/de_HQ.png" v-lazyload="result.model_pic" />
				</div>
				<div class="modelInfo">
					<p class="textOverflow_1">{{result.brand}}{{result.series}}</p>
					<p class="textOverflow_1">{{result.year}}{{result.engines_ml}}{{result.style}}</p>
					<span v-touch:tap="goModelSelect">
						<i class="iconfont icon-qiehuan"></i>
						切换
					</span>
				</div>
			</div>
			<!--轮播图-->
			<div class="banner">
				<swiper :options="swiperOption">			  
				  <swiper-slide v-for="imgItem in banners" track-by="$index">					  	
				  		<img src="../../libs/images/de_HQ.png"  v-lazyload="imgItem" class="preview-img" @click="$preview.open($index, previewImg)"/>			  					  	
				  </swiper-slide>				  
				  <div class="swiper-pagination"  slot="pagination" ></div>				 
				</swiper>
			</div>
			<ul class="modelArgument_info">
					<li>
						<div>发动机型号</div>
						<div>{{result.engine_model}}</div>
					</li>
					<li>
						<div>初装量</div>
						<div>{{result.first_capacity}}</div>
					</li>
					<li>
						<div>初装量</div>
						<div>{{result.first_capacity}}</div>
					</li>
					<li>
						<div>推荐粘度</div>
						<div>{{result.recd_viscosity}}</div>
					</li>
					<li>
						<div>推荐发动机</div>
						<div>{{result.rec_engine_oil}}&nbsp;&nbsp;<span class="other" v-touch:tap="goEngine(result.rec_engine_oil_pic)"></span>图</div>
					</li>
					<li>
						<div>防冻液初装量</div>
						<div>{{result.antifreeze_first_capacity}}</div>
					</li>
					<li>
						<div>推荐防冻液</div>
						<div>{{result.rec_antifreeze}}&nbsp;&nbsp;<span class="other" v-touch:tap="goEngine(result.rec_antifreeze_pic)"></span>图</div>
					</li>
					<li>
						<div>推荐防冻液</div>
						<div>{{result.rec_brake_fluid}}&nbsp;&nbsp;<span class="other" v-touch:tap="goEngine(result.rec_brake_fluid_pic)"></span>图</div>
					</li>
					
			</ul>

			
			<div class="modelArgument_item">
				<span>温馨提示</span>
			</div>
		</div>
			
			<ul class="feedback">
				<li>反馈意见</li>
				<li v-touch:tap="goIndex">选择其他车型</li>	
			</ul>
		</div>
		
	</div>
</template>

<script>
	
    import { swiper, swiperSlide} from 'vue-awesome-swiper';	
	module.exports={
		init:function(){
			HQ_CALLBACK.modelIntroduce = {};
		},
		ready:function(){
			console.log(this.route)
			HQ.callApi('get_product',{
				'modelId':28649,
				'product_type_id':2
			},this.getProductDetailCallBack);
		},
		watch:{
			
		},
		data:function(){			
//			HQ_CALLBACK.liyuanIndex.getOfferCallBack = this.getOfferCallBack;
			
			
			return{
				banners:[
					
				],
				swiperOption: {
		        	// 如果你后续需要找到当前实例化后的swiper对象以对其进行一些操作的话，可以自定义配置一个名字
			        name: 'currentSwiper',
			        // 所有配置均为可选（同Swiper配置）
			        setWrapperSize :true,
			        autoHeight: false,
			        pagination : '.swiper-pagination',
			        paginationClickable :true,
			        prevButton:'.swiper-button-prev',
			        nextButton:'.swiper-button-next',
			        loop:true,
			        autoplay:3000,			        
			        autoplayDisableOnInteraction : false,
			        onTransitionStart(swiper){
			        	self.selectImgIndex = swiper.realIndex;
			        }
			    },
			    result:null
			}
			
		},
		methods:{
			goModelSelect:function(){
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/modelSelect");
			},
			goIndex:function(){
				HQ.openView(HQ.PAGE_SERVER + "index.html#!/index");
			},
			getProductDetailCallBack:function(data){
				if(data.number == 200){
					this.result = data.result;
					this.banners.push(this.result.engine_pic);
					
				}
			},
			goChange:function(url){
				if(url){
					window.location.href = url;
				}
				
			},
			goRecPic:function(url){
				
				if(url){
					window.location.href = url;
				}
			}
		},
		computed:{
			//由于图片查看器配置需要，重组图片查看器对象
			previewImg(){
				var obj = [];
				for(var i=0;i<this.banners.length;i++){
					obj[i] = {};
					obj[i].src = this.banners[i];
					
					var img = document.createElement('img');

					img.src = this.banners[i]
					obj[i].w = parseInt(img.width);
					obj[i].h = parseInt(img.height);					
				}
				return obj;
			}	
		},		
		components:{
			swiper,
			swiperSlide,		
		},
		
		//不再当前页就销毁当前对象下的方法
		beforeDestroy: function() {
			delete HQ_CALLBACK.modelIntroduce;
		}
	}
</script>